<!--
  Generated template for the SearchPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <!-- 导航栏中放置一个搜索框 -->
    <ion-navbar>
      <!-- 双向数据绑定 -->
        <ion-searchbar [(ngModel)]="keywords"></ion-searchbar> 
        <ion-buttons end>
          <!-- 事件点击用单引号 -->
          <button ion-button color="dark" (tap)='getSearchListData()'> 
            搜索
          </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>


<ion-content>

  
  <!-- 1.0 搜索内容 -->
  <div class="secrch_content" *ngIf = "flag">
    <div class="hot_search">
      <h3 class="search_title">热搜</h3>
      <p>
        <span>女装</span>
        <span>男装</span>
        <span>家具</span>
        <span>化妆品</span>
        <span>女装</span>
        <span>男装</span>
        <span>家具</span>
        <span>化妆品</span>
      </p>
    </div>

    <div class="history_search">
      <h3 class="search_title">历史搜索</h3>
      <ion-list inset>
        <ion-item *ngFor="let item of historyList" 
        (press)="removeHistoryData(item)"  
        (tap)='clickHistorySearch(item)'>{{item}}</ion-item>
      </ion-list>
    </div>
  </div>


  <!-- 2.0 列表内容， 搜索出来的内容 -->
  <div class="list_content" *ngIf="!flag">
    <div class="sub_header">
        <div>综合</div>
        <div>销量</div>
        <div>价格</div>
    </div>

    <ion-list inset>
      <ion-item *ngFor = "let item of list">
          <ion-thumbnail item-left>
            <img [src]='config.apiUrl+item.s_pic' />
          </ion-thumbnail>
          <h2>{{item.title}}</h2>
          <p>价格<span>{{item.price}}</span>元</p>
      </ion-item>
    </ion-list>

    <!-- 下拉加载更多，分页 -->
    <ion-infinite-scroll (ionInfinite)="doMoreLoadData($event)" *ngIf="hasData">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>

</ion-content>
